<!--
 * @Author: your name
 * @Date: 2021-10-11 20:42:07
 * @LastEditTime: 2021-10-11 23:09:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3\src\pages\watch\computed.vue
-->
<template>
  <h1>Computed</h1>
  <a-typography>

    <a-typography-paragraph>
      <p>{{ computedNumber }}</p>
      <a-input type="number" v-model:value="number"></a-input>
      <input type="number" v-model="number" />
    </a-typography-paragraph> 
      
  </a-typography>
</template>

<script>
import { ref, computed} from 'vue'
export default {
  setup(props) {
    let number = ref(0)
    
    const computedNumber = computed(() => number.value + 1)

    return {
      number,
      computedNumber
    }
  }
}
</script>

<style>

</style>